<template>
  <div class="main_attention">
    <div class="main_attention_body">
      <a-spin :spinning="spinning" :tip="'加载中'" :delay="100">
        <div v-for="(item,index) in problemList" :key="item.id">
          <div class="main_attention_body_title">
            <router-link :to="{
            path: '/problemDetails',
            query: {
              id:item.id
            }
          }">
              <div class="main_attention_body_title_hover">
                <strong v-html="item.title"></strong>
              </div>
            </router-link>
          </div>
          <div class="main_attention_body_second">
            <div>{{ item.nickname }}</div>
            <div class="main_attention_body_createTime">发布于：{{ item.createTime }}</div>
          </div>
          <div class="main_attention_body_statistical">
            <img @click="userGiveALikeProblem(item,index)" v-if="item.isLike===1"
                 src="../../../../assets/img/answer/点赞.png"
                 class="main_attention_body_statistical_like" alt="点赞"/>
            <img @click="userGiveALikeProblem(item,index)" v-else
                 src="../../../../assets/img/answer/未点赞.png"
                 class="main_attention_body_statistical_like" alt="未点赞"/>
            &nbsp;点赞：{{ item.likeCount }}
            <div class="main_attention_body_statistical_browse">浏览：{{ item.views }}</div>
            <div class="main_attention_body_statistical_comment">评论：{{ item.reply }}</div>
          </div>
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {Answer, GiveALike} from "@/model/home/answer";
import {getUserAttentionPublishProblem, getUserGiveALikeListById, like} from "@/api/home/answer";
// @ts-ignore
import cookie from 'js-cookie'
import {saveScrollLocation} from "@/utils/storageScrollLocation";
import {checkUserLogin} from "@/utils/getUser";
import {message} from "ant-design-vue";

//是否显示加载中
const spinning = ref<boolean>(true);

//问题列表
const problemList = ref<Answer[]>([])

//用户id
const userId = ref<number>(0)

//获取当前用户关注的人发表的问题
const handleUserAttentionPublishProblem = async () => {
  if (userId.value != 0) {
    const res = await getUserAttentionPublishProblem(userId.value)
    problemList.value = res.data.data.list
    await userGiveALike()
  } else {
    message.warn('网络异常，请稍后重试！')
  }
}

//用户点赞问题需要的参数
const giveALike = ref<GiveALike>({
  userId: 0,
  problemId: 0
})

//当前用户已点赞的数据
const userGiveALikeList = ref()

//判断当前用户是否点赞
const userIsGiveALikeProblem = () => {
  if (problemList.value) {
    for (let i = 0; i < problemList.value.length; i++) {
      for (let j = 0; j < userGiveALikeList.value.length; j++) {
        if (problemList.value[i].id === userGiveALikeList.value[j].problemId) {
          problemList.value[i].isLike = userGiveALikeList.value[j].isLike
          break;
        } else {
          problemList.value[i].isLike = 0
        }
      }
    }
  }
  //保存页面滚动条位置
  saveScrollLocation()
}

//从关联表获取当前用户点赞的数据
const userGiveALike = async () => {
  const res = await getUserGiveALikeListById(userId.value)
  userGiveALikeList.value = res.data.data.list
  setTimeout(async () => {
    //判断当前用户是否点赞
    await userIsGiveALikeProblem()
    spinning.value = false
  }, 1000)
}

//用户点赞问题
const userGiveALikeProblem = async (row: any, index: any) => {
  giveALike.value.userId = userId.value
  giveALike.value.problemId = row.id
  if (!await checkUserLogin()) {
    message.warn('未登录，无法点赞')
  } else {
    like(giveALike.value).then((res) => {
      problemList.value[index].isLike = problemList.value[index].isLike === 1 ? 0 : 1;
      if (res.data.data.isLike === 1) {
        message.success('点赞成功')
      } else {
        message.error('取消点赞')
      }
      //如果点赞，则点赞人数+1
      if (problemList.value[index].isLike === 1) {
        problemList.value[index].likeCount = problemList.value[index].likeCount + 1
      } else {
        problemList.value[index].likeCount = problemList.value[index].likeCount - 1
      }
    })
  }
}

//从cookie中获取用户信息
const getUserId = () => {
  userId.value = JSON.parse(cookie.get('userinfo')).id
}

getUserId()
handleUserAttentionPublishProblem()
</script>

<style lang="less" scoped>
.main_attention {
  .main_attention_body {
    margin-top: 10px;
    padding: 5px;

    .main_attention_body_title {
      font-size: 20px;
      cursor: pointer;
      width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      .main_attention_body_title_hover:hover {
        color: red;
      }
    }

    .main_attention_body_second {
      display: flex;
      margin-top: 10px;

      .main_attention_body_createTime {
        margin-left: auto;
        margin-right: 50px;
      }
    }

    .main_attention_body_statistical {
      display: flex;
      margin-top: 10px;
      padding-bottom: 2px;
      border-bottom: 1px solid #f0f0f0;
      margin-right: 5px;

      .main_attention_body_statistical_like {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }

      .main_attention_body_statistical_browse {
        margin-left: 50px;
        margin-right: 10px;
      }

      .main_attention_body_statistical_comment {
        margin-left: 50px;
        margin-right: 10px;
      }
    }
  }
}
</style>